<template>
  <div class="module-header">
    {{ `物料列表` }}
    <div class="module-header-search">
      物料编号或物料名称：
      <el-input size="default" v-model="searchKey" @keypress="onEnterPress" clearable placeholder="输入编号或物料名称"/>
      <el-button size="default" type="primary" @click="onEnterPress">搜索</el-button>
      <el-button size="default" type="primary" @click="onCreateBom">新增物料</el-button>
    </div>
  </div>
  <div class="table-content">
    <el-table :data="bomList" style="width: 100%" stripe empty-text="没有数据">
      <el-table-column prop="code" label="物料编码" width="100"></el-table-column>
      <el-table-column prop="name" label="物料名称" width="345"></el-table-column>
      <el-table-column prop="unit" label="物料单位" width="80"></el-table-column>
      <el-table-column prop="price" label="物料单价" width="80"></el-table-column>
      <el-table-column prop="quantityPerRoll" label="卷料容量" width="80"></el-table-column>
      <el-table-column label="物料材质" width="200">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            {{ getDictEntity('MATERIAL_TYPE', scope.row.material + '') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="物料分类" width="80">
        <template #default="scope">
          <div style="display: flex; align-items: center">{{
              getDictEntity('BOM_CATEGORY', scope.row.category + '')
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="物料备注"></el-table-column>
      <el-table-column label="管理" fixed="right" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
                   background layout="prev, pager, next, sizes" small :total="recordCount" current-page="1"
                   :default-page-size="10"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
import {mixins, Options} from 'vue-class-component';
import {getBom} from "@/apis/bom.api";
import BomModel from "@/models/BomModel";
import {BackendPageModel} from "@/models/BackendPageModel";
import DictMixin from "@/mixins/dict.mixin";
import PageMixin from "@/mixins/page.mixin";

@Options({})
export default class BomListView extends mixins(DictMixin, PageMixin) {
  searchKey = '';
  bomList: BomModel[] | null = null;

  created(): void {
    this.getData();
  }

  onCreateBom() {
    this.$router.push('/bom/create')
  }

  onEnterPress(event: KeyboardEvent | PointerEvent) {
    if (((event instanceof KeyboardEvent) && (event as KeyboardEvent).key === 'Enter') || event instanceof PointerEvent) {
      this.currentPage = 1;
      this.getData();
    }
  }

  getData(): void {
    getBom(this.searchKey, this.currentPage, this.pageSize).then((value: BackendPageModel<BomModel>): void => {
      console.log(value)
      this.bomList = value.content
      this.recordCount = value.totalElements;
      console.log(this.bomList)
    })
  }

  handleEdit(rowIndex: number, row: BomModel): void {
    this.$router.push(`/bom/edit/${row.id}`)
  }

  handleDelete(rowIndex: number, row: BomModel): void {
    console.log(rowIndex, row)
  }
}
</script>
